<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>简写形式(工作中用)</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//第一步：定义组件（类式组件）
			class Weather extends React.Component{
				//初始化状态
				state = {isHot:true,wind:1}
				render(){
					console.log('---render---')
					return (
						<div>
							<h2>今天天气很{this.state.isHot ? '炎热':'凉爽'}，{this.state.wind}级风</h2>
							<button onClick={this.changeWeather}>切换天气</button>	
						</div>
					)
				}
				//changeWeather是作为react中事件的回调在使用，所以要写成：赋值语句+箭头函数的形式
				changeWeather = ()=> {
					const {isHot,wind} = this.state
					this.setState({isHot:!isHot})
					this.setState({wind:wind+1})
					this.showMsg()
				}
				//showMsg中不用从组件实例对象上读取任何的数据，所以直接写，放在原型上就可以
				showMsg(){
					console.log('天气变化莫测，注意增添衣物')
				}
			}
			//第二步：渲染组件到页面
			ReactDOM.render(<Weather/>,document.getElementById('root'))

			

		</script>
	</body>
</html>